<template>
  <div class="app">
    <db-bread/>
    <db-books :Bookes="getBooks" />
  </div>
</template>
<script>
import dbBooks from "../components/details/dbBooks.vue";
import bread from "../components/details/bread.vue";
export default {
  data() {
    return {
      getBooks: [],
    };
  },
  components: { "db-books": dbBooks,
                "db-bread": bread},
  //创建前加载数据
  beforeCreate() {
   
      
  },
  mounted() {
    let bookObj = this.$route.query;
      switch (bookObj.item) {
        //原创
        case 'ori':
          this.axios.get(`/book/origin?bookId=${bookObj.id}`).then((result) => {
            
          });
          break;
        //出版
        case 'pub':
          console.log(`bookid=${bookObj.id}`)
          this.axios.get(`/book/publish?bookId=${bookObj.id}`).then((result) => {
            let arr = result.data.data;
            this.getBooks.push(...arr);
            let data = {
              data:result.data.data
            }
            this.$store.commit('updateBooks',data)
            console.log(`vuex=${this.$store.state.books}`);
          });
          break;
      }
  },
  beforeRouteEnter(to,from,next){
    next();
  },
  //添加路由守卫 再次点击进入时更新数据
  beforeRouteUpdate(to,from,next){
    let bookObj = this.$route.query;
      switch (bookObj.item) {
        //原创
        case 'ori':
          this.axios.get(`/book/origin?bookId=${bookObj.id}`).then((result) => {
            
          });
          break;
        //出版
        case 'pub':
          console.log(`bookid=${bookObj.id}`)
          this.axios.get(`/book/publish?bookId=${bookObj.id}`).then((result) => {
            let arr = result.data.data;
            this.getBooks.push(...arr);
            let data = {
              data:result.data.data
            }
            this.$store.commit('updateBooks',data)
            console.log(`vuex=${this.$store.state.books}`);
          });
          break;
      }
    next();
  }
};
</script>
<style lang="scss">
@import url("../assets/css/dbsrtap.css");
.app{
  background-color: #f8f9f9;
  position: relative;
  top: 60px;
  span{
    color: #000 !important;
  }
}
</style>